<template>
	<div class="site_info_container">
		<el-form ref="form" :model="formData" :rules="formRules" label-position="top">
			<el-row :gutter="20">
				<el-col :span="18">
					<el-form-item label="网站名称" prop="name">
						<el-input v-model="formData.name" clearable placeholder="请输入网站名称"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="站点域名" prop="workDomain">
						<sw-ip-input v-model="formData.workDomain" placeholder="请输入网站IP地址" clearable></sw-ip-input>
					</el-form-item>
				</el-col>
				<el-col :span="18">
					<el-form-item label="地址" prop="field1">
						<el-input v-model="formData.field1" placeholder="请输入地址"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="系统自动退出时间" prop="quitTime">
						<el-input-number v-model="formData.quitTime" controls-position="right" :min="1" />
						<span class="unit">分钟</span>
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="密码等级" prop="passwordLevel" class="column">
						<el-radio-group v-model="formData.passwordLevel">
							<el-radio label="1">
								<el-tooltip effect="dark" placement="top">
									<span>简单</span>
									<template slot="content">该级别为6到18位任意字符的密码</template>
								</el-tooltip>
							</el-radio>
							<el-radio label="2">
								<el-tooltip effect="dark" placement="top">
									<span>标准</span>
									<template slot="content">该级别为6到18位必须包含数字和大小字母的密码</template>
								</el-tooltip>
							</el-radio>
							<el-radio label="3">
								<el-tooltip effect="dark" placement="top">
									<span>困难</span>
									<template slot="content">该级别为12到24位必须包含数字、大小写字母和特殊字符的密码</template>
								</el-tooltip>
							</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="网站LOGO" prop="webLogo">
						<sw-image-uploader accept="png" v-model="formData.webLogo" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="用户默认头像" prop="userPic">
						<sw-image-uploader accept="png" v-model="formData.userPic" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="站点FAVICON" prop="field3">
						<sw-image-uploader accept="ico" v-model="formData.field3" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="登录页背景" prop="field4">
						<sw-image-uploader accept="jpg,jpeg" v-model="formData.field4" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="版权信息" prop="message">
						<el-input v-bind="textareaConfig" v-model="formData.message" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="button">
			<el-button type="primary" @click="handleSaveSiteInfo()" :loading="btnLoading">保存网站信息</el-button>
			<el-button type="primary" @click="$router.back()" plain>取消修改</el-button>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
import { addedSiteInfo, updateSiteInfo } from '@/api/system/tbSysSite';
export default {
	data() {
		return {
			formData: {},
			formRules: {
				name: [{ required: true, message: '请输入网站名称', trigger: 'blur' }]
			},
			textareaConfig: {
				type: 'textarea',
				placeholder: '请输入版权信息',
				autosize: { minRows: 4, maxRows: 6 }
			},
			btnLoading: false
		};
	},
	computed: {
		...mapGetters(['siteInfo']),
		addOrEdit() {
			return lodash.isEmpty(this.formData);
		}
	},
	mounted() {
		this.formData = lodash.cloneDeep(this.siteInfo);
	},
	methods: {
		handleSaveSiteInfo() {
			this.$refs.form.validate((valid) => {
				if (!valid) return false;
				this.btnLoading = true;
				this.addOrEdit ? this.addSiteInfo() : this.updateSiteInfo();
			});
		},

		//添加网站基本信息
		async addSiteInfo() {
			let params = { ...this.formData };
			let result = await addedSiteInfo(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$message.success('添加网站信息成功');
			}
		},

		//更新网站基本信息
		async updateSiteInfo() {
			let params = { ...this.formData };
			let result = await updateSiteInfo(params).then((res) => res.data);
			this.btnLoading = false;
			if (result.code === '0') {
				this.$message.success('更新网站信息成功');
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.site_info_container::v-deep {
	display: flex;
	flex-direction: column;
	height: 100%;
	.el-form {
		flex: 1;
		padding: 20px;
		overflow: hidden;
		overflow-y: auto;
	}
	.el-form-item.column {
		display: flex;
		.el-form-item__label {
			padding-bottom: 0;
			margin-right: 16px;
		}
		.el-radio__label {
			font-size: 15px;
		}
	}
	.el-form-item__label {
		display: flex;
		align-items: center;
		padding-bottom: 12px;
		font-weight: bold;
		font-size: 15px;
		line-height: 1;
	}
	.button {
		padding: 16px;
		flex-shrink: 0;
		border-top: solid 1px #e4e7ed;
	}
}
</style>
